<template>
    <div id="trends">
        <head-tip title='文章' :isback=false>
            <div class="head-right">
                <span @click="togourl(dataList.id)" class="link icon-only" style="font-size:22px; margin-right: 10px;color: #fff;"><i class="el-icon-edit-outline"></i></span>
            </div>
        </head-tip>
        <section class="trend-content">
            <div id="mescroll" class="mescroll">
                <ul id="dataList" class="data-list">
                    <scroller snappingHeight="10" class="scroller" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                        <li style="position:relative;" class="dynamic-one"  v-for="(item,key) in dataList" :key="key">
                            <div class="dyn-user">
                                <p class="dyn-c-img"><img :src="decodeURIComponent(item.cheadimage)"></p>
                                <p class="dyn-c-name">{{decodeURIComponent(item.crealname)}}<br />{{item.btime}}</p>
                                
                            </div>
                            <div class="arts" @click="toArt(item)">
                                <p class="dyn-title">&nbsp;&nbsp;{{item.ctitle}}</p>
                                <p class="arts-dyn-imgbox dyn-imgbox" v-if="item.attachs.length>0">
                                    <img  
                                        :key="index"
                                        v-for="(img,index) in item.attachs" 
                                        v-if="index === 0"
                                        :src="domainName+img.cpath+img.cfilename">
                                </p>
                            </div>
                            <div class="timeshow">{{changetime(item.ddate)}}</div>
                            <div class="clear"></div>
                            <div class="good-count">
                                <label class="left-count" :data-id="item.id">
                                    <i class="iconfont icon-pinglun"></i><span>{{item.iaccount ?item.iaccount :0 }}</span>
                                </label>
                                <label class="left-good" :data-id="item.id" data-uid="null" @click="dianzan(item)">
                                    <i class="iconfont icon-dianzan " :class="{zanok:item.atid}"></i> <span>{{item.iatcount?item.iatcount :0}}</span>
                                </label>
                                <div class="clear"></div>
                            </div>
                        </li>
                    </scroller>
                </ul>
            </div>
        </section>
        <foot></foot>
    </div>
</template>

<script>
import {baseUrl} from '../../config/env.js'
import fetch from '@/config/fetch.js'
import headTip from '@/components/common/head'
import foot from '@/components/common/foot'
import {footNav} from '@/params/foot'
export default {
    data () {
      return {
        doneSome:function(){},
        pageNo:1,
        domainName:'http://card.adouyun.com/CloudCard/',
        ishowcomment:false,
        dataList:[],
      };
    },
    // beforeRouteEnter(to,from,next){
    //     console.log(from.name)
    //     if(from.name == 'cardArticle' || from.name == null){
    //         to.meta.isActive = false
    //     }
    //     next()
    // },
    methods:{
        async infinite(done,isrefresh) {
            let self = this;
            let sendData = {
                pageNo:self.pageNo,
                pageSize:10,
                findContent:'',
                itype:0
            }
            
            sendData.uid = ''
            sendData.iloguid = sessionStorage.uid

            let responseData = fetch('/article/listArticle',sendData,'POST');
            await responseData.then((res)=>{
                                    if(res.data!='' && res.data.list.length>0){
                                        
                                        let dataList = res.data.list;
                                        dataList.forEach( (item,key) => {
                                            if(self.dataList.indexOf(item.id)<0){
                                                self.dataList.push(item)
                                            }
                                        })
                                        if(isrefresh){
                                            self.dataList = dataList
                                        }
                                        self.pageNo++
                                        self.doneSome = done
                                        done();
                                    }else{
                                        // console.log(self.dataList)
                                        self.$refs.my_scroller.finishInfinite(2);
                                    }
                                })
        },
        async refresh(done) {
            let isrefresh = true;
            this.pageNo = 1;
            await this.infinite(done,isrefresh);
            done();
        },
        changetime(val){
            return this.timeBetween(val);
        },
        togourl(id,uid){
           this.$router.push({path:'/card/addArticle',query: {id:id}});
        },
        dianzan(item){
            var iarticleid=parseInt(item.id)
            var url='/thumbup/saveThumbUp'
            var json={iarticleid:iarticleid}
            if(item.atid){
                url='/thumbup/cancelThumbUp'
                json={id:item.atid}
            }
            let responseData = fetch(url,json,'POST');
            responseData.then((res)=>{
                if(res.result==1){
                    if(item.atid!=null){
                        item.iatcount--
                        item.atid = null
                    }else{
                        item.iatcount++
                        item.atid = res.data.id
                    }              
                }else{
                    self.$message({
                        duration: 2000,
                        message: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        toArt(item){
            this.$router.push({path:'/card/article',query:{id:item.id,uid:item.uid,keep:1}});
        }
    },
    // activated(){
    //     console.log(this.$route.meta.isActive)
    //     if(this.$route.meta.isActive == true){
    //         this.pageNo = 1;
    //         this.refresh(this.doneSome);
    //     }
    // },
    components:{
        headTip,
        foot
    },
    mounted(){
        //清空vuex中的发布选项
        // console.log(this.$route.meta.keepAlive)
        this.$store.commit('emptyPublicCard')
        //获取名帖动态
    }
}
</script>

<style scoped >
.arts{
    display: flex;
    flex-direction: row-reverse;
    padding: 2%;
    justify-content: flex-start;
    background: #f9f9f9;
    height: auto; overflow: hidden;
    font-size: 1rem;
    color: #8a8a8a;
}
.timeshow{ padding: 2%; font-size: .8rem; color: #999;}
.arts-dyn-imgbox{
    width: 4rem !important;
}
.arts-dyn-imgbox img{
    width: 3.5rem;
    margin:0 !important;
}
.dyn-user{
    display: flex;
    align-items: center;
    padding: 0.5rem;
}
.dyn-c-img{
    width: 10%;
    height: autp;
    margin-right: 1rem;
}
.dyn-c-img img{
    width: 100%;
    height: 100%;
    border-radius: 5rem;
}
.trend-content{height: auto;}
</style>
<style scoped>
.mescroll{position: fixed;top: 3rem;bottom: 3.8rem;height: auto; background: #f9f9f9;}
/*动态*/
/* { width:100%;height: auto;box-sizing: border-box; padding-bottom: 1rem;} */
.dynamic-one{ display: inline-block;  width: 100%; height: auto; overflow: hidden;font-size: .9rem; padding-top: .2rem;margin-bottom: 1rem;  padding-bottom: 1rem; background: #fff;}
.last-one{margin-bottom: 0}
.dynamic-one p.dyn-time{ display: inline-block; width: auto; margin-left: 2%; background: #e9e9e9; padding-left: .3rem; padding-right: .3rem; font-size: .7rem; padding-top: .2rem; padding-bottom: .1rem; border-radius: 3px;}
.dynamic-one p.dyn-time i{ font-size: .7rem; padding-right: .2rem;}
.dynamic-one p.dyn-imgbox img{ display: inline-block; height: 3.5rem; float: left; margin:1.5% 1.5% 0 0; margin-top: .5rem; }
.dynamic-one p.dyn-title{ width: 96%; margin: auto; height: auto; overflow: hidden;color: #333;}
.dynamic-one p.dyn-imgbox{ width: 96%; margin: auto; height: auto; overflow: hidden;}
.good-count{ width: 100%; margin: auto; height: auto;margin-top: 1rem; color: #333; overflow: hidden;}
.good-count label.left-count{ width: auto; float: left; text-align: center; margin-left: 2%;}
.good-count label.left-count a#turnTodynamic{ display: inline-block; width: auto; list-style: none;}
.good-count label.left-good{ width: auto; float: left; text-align: center; margin-left: 2%;}
.good-count label.left-count i{ color: #ddd;font-size: 1.1rem;}
.good-count label.left-good i{ color: #ddd; font-size: 1.1rem;}
.cardcode-popup{width: 100%;}
.reply-list-info { display: block;width: 100%; line-height: 2rem;}
.reply-list-info span.uName {display: inline-block;color: #333;font-weight: bold;}
.good-count label.left-good i.zanok {color:#00AA76 }
.comment-popup{color: #666;line-height: 3.6rem;height: 3.6rem;background: #2790A6;width: 100%;}
#reply-input{border-radius: 5px;outline: 0;width: 70%;height: 2.35rem;margin-left: 2%;border: 0;margin-top: .65rem;padding-left: 10px;float: left;font-size: .8rem;}
#reply-submit{background: #FFF;width: 18%;float: right;height: 2.35rem;margin-right: 2%;text-align: center;margin-top: 10px;line-height: 2.35rem;border-radius: 5px;color: #2790A6;}
.contentList{width: 96%; height: auto; overflow: hidden; margin:auto ; margin-top: 1rem;border-top: solid 0.05rem #eee;}
</style>
